<template>
     <section class="mysection">
        <div class="">
            <h2 class="unfinish">友链板块还未开发，以下内容纯属摆设...</h2>
            <h4 class="index-title" id="New2"><i class="el-paper-clip"></i> 本站友情链接：</h4>
            <ul class="link-list">
                <li>
                    <div class="link-item">
                        <a href="" target="_blank">
                            <img src="" alt="友链1图片">
                            <h3 class="orange-text">友链1</h3>
                            <!-- <p class="orange-text" th:text="${link.description}"></p> -->
                        </a>
                    </div>
                </li>
            </ul>
        </div>
        <article>
            <!--编辑的内容-->
            <div class="link-edit">
                <h4 class="index-title">
                    <i class="el-info-circle"></i><span
                        style="font-size:14px;font-family:'Microsoft YaHei';">申请说明:</span>
                </h4>
                <p>
                    <span style="font-size:14px;font-family:'Microsoft YaHei';">① .</span><span
                        style="color:#E53333;font-size:14px;font-family:'Microsoft YaHei';"><strong>贵站需要先添加本站友链，友链信息见下方，本站会定时扫描所有友链，请确保网站访问正常，<strong>本站自动审核程序运行中，最迟会在24小时内跟上链接</strong></strong></span>
                    <span style="font-size:14px;font-family:'Microsoft YaHei';">，谢谢！</span><br/>
                    <span style="font-size:14px;font-family:'Microsoft YaHei';">② .申请提交后若无其它原因将在24小时内审核,如超过时间还未通过,请通过首页邮件地址联系我。(各种额外因素)</span><br/>
                </p>
                <br/>
                <h4 class="index-title">
                    <i class="el-idea"></i><span style="font-size:14px;font-family:'Microsoft YaHei';">站点信息:</span>
                </h4>
                <p>
                    <span style="font-size:14px;font-family:'Microsoft YaHei';">首页地址：</span>
                    <a href="/" target="_blank">
                        <span style="font-size:14px;font-family:'Microsoft YaHei';">http://www.humbleyuan.com(目前还未上线(╯︿╰))</span>
                    </a><br/>
                    <span style="font-size:14px;font-family:'Microsoft YaHei';">友链地址：www.humbleyuan.com/link.html</span><br/>
                    <span style="font-size:14px;font-family:'Microsoft YaHei';"> 网站名称：HumbleYuan的个人博客</span><br/>
                    <span style="font-size:14px;font-family:'Microsoft YaHei';"> 网站描述：卑微小袁的个人博客，Record Everyday!</span><br/>
                    <!-- <span style="font-size:14px;font-family:'Microsoft YaHei';"> 网站图标地址：www.bianxiaofeng.com/favicon.ico</span><br/> -->
                </p>
            </div>
            <h4 class="index-title"><i class="el-edit"></i> 开始申请: 欢迎交换友链</h4>
            <div id="Join" class="form-zd form-in">
                <form action="#" id="contact-form" method="post" onsubmit="return false">
                    <!----昵称------->
                    <div class="input-prepend">
                        <span class="add-on"><i class="el-user"></i></span>
                        <input name="title" type="text" id="title" size="16" placeholder="网站名称（必须）"/>
                    </div>
                    <!------邮箱----->
                    <div class="input-prepend">
                        <span class="add-on"><i class="el-envelope"></i></span>
                        <input name="email" type="text" id="email" size="16" placeholder="您的邮箱（必须）"/>
                    </div>
                    <!----网址------->
                    <div class="input-prepend">
                        <span class="add-on"><i class="el-globe"></i></span>
                        <input name="url" type="text" id="url" size="16" placeholder="您的网站（必须）"/>
                    </div>
                    <div class="input-prepend">
                        <span class="add-on"><i class="el-braille"></i></span>
                        <input name="description" type="text" id="description" size="16" placeholder="网站介绍（必须）"/>
                    </div>
                    <div class="input-prepend">
                        <span class="add-on"><i class="el-braille"></i></span>
                        <input name="headerImg" type="text" id="headerImg" size="16" placeholder="网站图标地址（必须）"/>
                    </div>
                    <!----内容------->
                    <!--                    <textarea class="link-text" style="height:150px;width:70%;" name="u_content" id="info"-->
                    <!--                              placeholder="网站介绍（必须）"></textarea>-->
                    <!--提交表单--------->
                    <div class="feed-sub"><input type="submit" class="btn btn-inverse" onclick="return link()"
                                                 value="提交申请"/></div>
                </form>
            </div>
        </article>
    </section>
</template>

<script>
    import Layer from '../../static/front-vue/js/layer.min.js'
    import Layui from '../../static/front-vue/js/layui.js'
    export default {
        name:'foot',
        components:{}
    }

    $(function () {
        if ($(".wall").children("li").length >= 10) {
            $(".pagintion").show();
            $(".wall").css("margin-bottom", "10px");
        } else {
            $(".pagination").hide();
            $(".wall").css("margin-bottom", "90px");
        }
    });

    function link() {
        if ($("#title").val() == "") {
            layer.msg('网站名称不能为空', {icon: 2});
            return false;
        }
        if ($("#email").val() == "") {
            layer.msg('邮箱不能为空喔', {icon: 2});
            return false;
        } else {
            var reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
            var email = $("#email").val();
            if (!reg.test(email)) {
                layer.msg('邮箱格式错误喔', {icon: 2});
                return false;
            }
        }
        if ($("#url").val() != "") {
            var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
            var url = $("#url").val();
            if (!reg.test(url)) {
                layer.msg('网站格式错误喔，请输入带http格式的网址', {icon: 2});
                return false;
            }
        } else {
            layer.msg('网站地址不能为空', {icon: 2});
        }
        if ($("#description").val() == "") {
            layer.msg('网站描述不能为空', {icon: 2});
        }
        if ($("#description").val() == "") {
            layer.msg('网站描述不能为空', {icon: 2});
        }
        if ($("#headerImg").val() != "") {
            var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
            var url = $("#headerImg").val();
            if (!reg.test(url)) {
                layer.msg('图标格式错误喔，请输入带http格式的图标', {icon: 2});
                return false;
            }
        } else {
            layer.msg('图标地址不能为空', {icon: 2});
        }
        var title = $("#title").val();
        var email = $("#email").val();
        var url = $("#url").val();
        var description = $("#description").val();
        var headerImg = $("#headerImg").val();
        $.ajax({
            type: "POST",
            // url:"ajax_feedback",
            url: "",
            data: "title=" + title + "&email=" + email + "&url=" + url + "&description=" + description + "&headerImg=" + headerImg,
            dataType: "json",
            success: function (data) {
                if (data.code == 0) {
                    $("#title").val("");
                    $("#email").val("");
                    $("#url").val("");
                    $("#description").val("");
                    $("#headerImg").val("");
                    layer.msg('恭喜提交成功！待管理员审核通过后显示!', {icon: 1});
                    $("html, body").animate({
                        scrollTop: $("#applink").offset().top
                    }, {duration: 500, easing: "swing"});
                    return false;
                }
            },
            error: function (jqXHR) {
                layer.msg('发送错误：' + jqXHR.status, {icon: 2});
            },
        });

    }
</script>
    
<style scoped>
    .unfinish {
        color: rgb(255, 103, 0 )
    }
</style>